import Sortable from "sortablejs";
import type { PayMethodModel, SortableEvent } from "./types";
const sortableOptions = {
	// or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
	group: "sort-group",
	// 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动
	handle: ".sort-handle",
	// 过滤器，不需要进行拖动的元素
	filter: ".sort-text",
	// 允许拖拽的项目类名
	// draggable: '.sort-wrapper',
	// number 定义鼠标选中列表单元可以开始拖动的延迟时间；
	delay: 0,
	// 忽略 HTML5拖拽行为，强制回调进行
	forceFallback: true,
	// 当使用forceFallback的时候，被复制的dom的css类名
	fallbackClass: "sort-sortable-fallback",
	dataIdAttr: "data-cdn-node",
	// drop placeholder的css类名
	ghostClass: "sort-sortable-ghost",
	// 被选中项的css 类名
	chosenClass: "sort-sortable-chosen",
	// 正在被拖拽中的css类名
	dragClass: "sort-sortable-drag",
	// 忽略 HTML5拖拽行为，强制回调进行
	sort: true,
	// 拖拽方向 (默认情况下会自动判断方向)
	direction: "horizontal",
	// ms, number 单位：ms，定义排序动画的时间
	animation: 150,
	scroll: true,
	// px, how near the mouse must be to an edge to start scrolling.
	scrollSensitivity: 30
};
interface UseSortableOptions {
	el: Ref<Element>;
	data: Ref<any[]>;
}
export function moveArrayElement(arr: PayMethodModel[], newIndex: number, oldIndex: number): CascaderNodeModel[] {
	if (newIndex < 0 || newIndex >= arr.length || oldIndex < 0 || oldIndex >= arr.length) {
		// 索引无效，返回原始数组
		return arr;
	}
	// 获取要移动的元素
	const element = arr.splice(oldIndex, 1)[0];

	// 将元素插入到新的位置
	arr.splice(newIndex, 0, element);

	return arr;
}
export const useSortable = (options: UseSortableOptions, cb: any) => {
	function initialSortable() {
		// eslint-disable-next-line
		new Sortable(options.el.value as HTMLElement, {
			...(sortableOptions as any),
			// 元素从一个列表拖拽到另一个列表
			onEnd: (evt: SortableEvent) => {
				const { oldIndex, newIndex } = evt;
				const res = moveArrayElement(options.data.value, newIndex!, oldIndex!);
				cb(evt, res);
			},
			onRemove(evt: SortableEvent) {
				options?.data?.value?.splice?.(evt.oldIndex!, 1);
			},
			onSort() {}
		});
	}

	onMounted(async () => {
		await nextTick();
		if (options.el.value) initialSortable();
	});

	return {};
};
